<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <base href="<%=request.getContextPath()%>/">
    <link rel="stylesheet" href="static/plugins/layui/css/layui.css">
    <script src="static/plugins/jquery-3.1.0.js"></script>
    <script src="static/plugins/layui/layui.js"></script>
    <style>
        .required {
            color: red;
            margin: 0 5px;
        }
    </style>
</head>
<body style="padding: 15px">
<div class="layui-container">
    <form class="layui-form" id="dataForm" lay-filter="dataForm">
        <input type="hidden" name="userinfoId" id="userinfoId" value="${loginInfo.userinfoId}">
        <div class="layui-form-item">
            <label for="username" class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="username" id="username" value="${loginInfo.username}"
                       readonly>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="oldPassword" class="layui-form-label"><span class="required">*</span>原密码</label>
            <div class="layui-input-block">
                <input type="password" class="layui-input" name="oldPassword" id="oldPassword"
                       placeholder="请输入原密码" lay-verify="required|checkPwd" lay-reqtext="原密码不能为空">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="password" class="layui-form-label"><span class="required">*</span>新密码</label>
            <div class="layui-input-block">
                <input type="password" class="layui-input" name="password" id="password" placeholder="请输入新密码"
                       lay-verify="required" lay-reqtext="新密码不能为空">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="confirmPassword" class="layui-form-label"><span class="required">*</span>确认密码</label>
            <div class="layui-input-block">
                <input type="password" class="layui-input" name="confirmPassword" id="confirmPassword"
                       placeholder="请再次输入新密码" lay-verify="required|checkConfirm" lay-reqtext="确认密码不能为空">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="save">提交</button>
            </div>
        </div>
    </form>
</div>
</body>
<script>
    $(function () {
        layui.use(function () {
            const form = layui.form;
            form.verify({
                checkPwd(value) {
                    let pass = false;
                    $.ajax({
                        url: "userinfo/password/check",
                        data: {
                            userinfoId: $("#userinfoId").val(),
                            password: value
                        },
                        method: "get",
                        dataType: "json",
                        async: false,
                        success(res) {
                            pass = res.code !== 200;
                        }
                    })
                    if (pass) {
                        return "原密码不正确！";
                    }
                },
                checkConfirm(value) {
                    if (value !== $("#password").val()) {
                        return "两次密码不一致！";
                    }
                }
            });
            form.on("submit(save)", function ({field}) {
                $.ajax({
                    url: "userinfo/password",
                    data: field,
                    method: "post",
                    dataType: "json",
                    success(res) {
                        if (res.code === 200) {
                            parent.layer.alert("修改密码成功，请重新登录！", {icon: 6}, function () {
                                top.location.replace("logout");
                            })
                        } else {
                            parent.layer.alert(res.msg, {icon: 5});
                        }
                    }
                });
                return false;
            });
        });
    })
</script>
</html>
